forum

home / developersection / forums / how to display data in the table using angular js

Ask Question
Manoj Bhatt

Other

Message
Can you answer this question?
Answer

1 Answers

Anupam Mishra

Anupam Mishra

04-Mar-2016
Hi Manoj,

If you want to use MVC pattern in angular js in your ASP.NET MVC Application Then you will be  design  Their Model,Controller and view.

Here we have  Student model is below:

How to display data in the table using Angular js

Now, My Model of angular js named Model.js

var app = angular.module("MyApp", []);



Controller.js:

app.controller("HomeController", function ($scope, myService)
{
    $scope.divStudent = false;
    GetAllStudent();
    //To Get
All Records 
    function GetAllStudent() {
        var getData = myService.getStudents();
         getData.then(function (stud) {
            $scope.Students = stud.data;
        }, function () {
            $('#alertcontent').html('Error in getting
record');
            $('#alertmodal').modal("show");
        });
    }


Service.js:


app.service("myService", function ($http) {
    //get All Student
    this.getStudents = function () {
        debugger;
        return $http.get("Home/GetAll");
        
    };
 
     //get StudentBy Id
    this.getStudent = function (StudentID) {
        var response = $http({
            method: "post",
            url: "Home/getStudentByNo",
            params: {
                id: JSON.stringify(StudentID)
            }
        });
        return response;
    }


Home Controller:(ASP.NET 'HomeController')


How to display data in the table using Angular js


Index.cshtml


  <html ng-app="MyApp"><div class="container">
        <div ng-controller="HomeController">
            <div class="panel
                   panel-default">
                <div class="panel-heading">
                    <div class="panel-title">
                        <h3>Student Details Page</h3>
                    </div>
                    <div style="float: right; font-size: 80%; position: relative; top: -29px">
 <input type="button" class="btnAdd btn btn-success" value=" Add Student" ng-click="AddStudentDiv()"                   />
       <input type="button" class="btnAdd btn
                 btn-success" value=" History" ng-click="HistoryDiv()" />
                    </div>
                </div>
                <div style="padding-top: 30px" class="panel-body">
                    <div class="divList">
               <p class="divHead">Student List</p>
                        <div style="float: right; font-size: 120%; position: relative; top: -29px">
                            <input type="text" ng-model="letter" placeholder="Search By Name">
                        </div>
                        <table cellpadding="12" class="table table-bordered
table-hover">
                            <tr>
                                <td><b>Student ID</b></td>
                                <td><b>First Name</b></td>
                                <td><b>Last Name</b></td>
                                <td><b>Enrollment Date</b></td>
                                <td><b>Actions</b></td>
                            </tr>
        <tr ng-repeat="student in Students|filter: letter |orderBy:
                  'FirstName'|orderBy: 'LastName'">
                                <td>{{student.StudentID}}
                                </td>
                                <td>{{student.FirstName}}
                                </td>
                                <td>{{student.LastName}}
                                </td>
                                <td>{{ student.EnrollmentDate.slice(6, -2) | date:"dd-MMM-yyyy"}}
                                </td>
                                <td>
 <span ng-click="editmodelStudent(student)" style="cursor: pointer; color: #0746D4;" class="btnAdd b         tn btn-default btn-xs">Edit</span>
 <span ng-click="deleteStudent(student)" style="cursor: pointer; color: #0746D4;" class="btnRed btn        btn-default btn-xs">Delete</span>
               </td>
           </tr>
    </table>
  </div>


Output:


How to display data in the table using Angular js

advertising
advertising

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy